<template>
	<view class="uni_box home">
		<navbar :title='info.title' :yin="true">
		</navbar>
		<view class="content">
			<!-- <view class="bone">
				<text class="bname">CFA一级模拟报告</text>
				<text class="btime">交卷时间：2020-08-10 20:30:23</text>
				<view class="jindu">
					<u-circle-progress active-color="#FD864F" width="250" inactive-color="#FFE4D8" :percent="80">
						<view class="u-progress-content">
							<text class='u-progress-info'>80%</text>
						</view>
					</u-circle-progress>
				</view>
				<view class="queview">
					<view class="queitem">
						<text class="quebiao"></text>
						<text class="zqlv">正确率</text>
					</view>
					<view class="queitem twoitem">
						<text class="quebiao"></text>
						<text class="zqlv">错误率</text>
					</view>
				</view>
				<view class="queviewtwo">
					<view class="queitem">
						<text class="qnum">此卷平均分：<text class="jbafen">98分</text></text>
					</view>
					<view class="queitem">
						<text class="qnum">击败考生：<text class="jbafen">201人</text></text>
					</view>
				</view>
			</view> -->
			<view class="btwo">
				<view class="btitem">
					<text class="tiname"><text class="tinum">{{info.count||0}}</text>题</text>
					<text class="zongnum">本次答题总数目</text>
				</view>
				<view class="btitem">
					<text class="tiname"><text class="tinum twonum">{{info.yes||0}}</text>题</text>
					<text class="zongnum">本次答题正确数</text>
				</view>
				<view class="btitem">
					<text class="tiname"><text class="tinum threenum">{{info.use_time||0}}</text>分钟</text>
					<text class="zongnum">本次答题用时</text>
				</view>
			</view>

			<view class="bthree">
				<view class="kaone">
					<view class="kaitem">
						<view class="zheng"></view>
						<!-- <image class="yuans" src="@/pages_subject/static/img/yuans.png" mode="" /> -->
						<text>正确</text>
					</view>
					<view class="kaitem">
						<image class="yuans" src="@/pages_subject/static/img/cuo.png" mode="" />
						<text>错误</text>
					</view>
					<view class="kaitem">
						<image class="yuans" src="@/pages_subject/static/img/yuan.png" mode="" />
						<text>未回答</text>
					</view>
				</view>
				
				<view class="katwo">
					<!-- 0没做 1对 2错 -->
					<view class="kkatwoitem" :class="item.status == 1?'kactive':item.status==2?'cuo':''" v-for="(item,index) in list" :key="index">
						<view class="ktitem">
							{{ item.sort }}
						</view>
					</view>
				</view>
				<view class="jiexi">
					<view class="quanjie" @click="jiexi(1)">全部解析</view>
					<view class="quanjie twoitembtn" @click="jiexi(2)">错题解析</view>
				</view>
			</view>
			

			<!-- <view class="jiaojuean" @click="jiaobtn">
				交卷
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:28,
				log_id:'',
				info:{
					title:"做题报告"
				},
				list:[],
				type:1,//1默认练习 2智能课程
			}
		},
		onLoad(option) {
			this.log_id = option.log_id
			if(option.type){
				this.type = option.type
			}
			this.getinfo()
		},
		onShow() {
		},
		methods: {
			async getinfo(){
				if(this.type == 2){
					//2智能课程
					let res = await this.$u.api.getSubmitLogInfoByZhike({
						log_id:this.log_id
					});
					this.info = res.info
					this.list = res.list
				}else{
					let res = await this.$u.api.getSubmitLogInfo({
						log_id:this.log_id
					});
					this.info = res.info
					this.list = res.list
				}
				
			},
			async jiexi(e){
				if(e == 1){
					// let res = await this.$u.api.getTopicAnalysisByAll({
					// 	log_id:this.log_id
					// });
					// console.log(res)
					this.navrouter("/pages_subject/twoPage/TiPage/TiJiexi?log_id="+this.log_id);
				}else{
					this.navrouter("/pages_subject/twoPage/TiPage/TiJiexi");
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 100rpx;
		.bone{
			display: flex;
			flex-direction: column;
			padding: 50rpx 30rpx;
			align-items: center;
			justify-content: center;
			.bname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				display: block;
				margin-bottom: 30rpx;
			}
			.btime{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
			.jindu{
				margin-top: 44rpx;
				.u-progress-content {
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.u-progress-dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #fb9126;
				}
				
				.u-progress-info {
					padding-left: 16rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #333333;
					letter-spacing: 2rpx
				}
			}
			.queview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 40rpx;
				.queitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin: 0 20rpx;
					.quebiao{
						display: inline-block;
						width: 18rpx;
						height: 18rpx;
						background: #FD864F;
						margin-right: 10rpx;
					}
					.zqlv{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #333333;
					}
				}
				.twoitem{
					.quebiao{
						background: rgba(255, 228, 216, 1);
					}
				}
			}
			.queviewtwo{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 30rpx;
				.queitem{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin: 0 50rpx;
					.qnum{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #666666;
					}
					.jbafen{
						color: rgba(253, 134, 79, 1);
					}
				}
			}
		}
		.btwo{
			margin: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.btitem{
				width: 33.33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-right: 1rpx solid #eee;
				.tiname{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
				}
				.tinum{
					font-weight: 500;
					font-size: 46rpx;
					color: #FA4E4E;
					position: relative;
					margin-right: 5rpx;
					top: 5rpx;
				}
				.zongnum{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
					display: block;
					margin-top: 15rpx;
				}
				.twonum{
					color: rgba(253, 134, 79, 1);
				}
				.threenum{
					color: rgba(255, 208, 7, 1);

				}
			}
			.btitem:last-child{
				border-right: none;
			}
		}
		.bthree{
			
			margin:70rpx 30rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			padding-bottom: 40rpx;
		}
		.kaone{
			height: 78rpx;
			width: 100%;
			position: relative;
			padding: 0 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #F8F8F8;
			box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(196,195,195,0.4);
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			.kaitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-right: 50rpx;
				.yuans{
					width: 28rpx;
					height: 28rpx;
					margin-right: 15rpx;
				}
				.zheng{
					width: 28rpx;
					height: 28rpx;
					margin-right: 15rpx;
					background-color: #27a027;
					border-radius: 50%;
				}
				text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}

			}
		}
		.katwo{
			padding: 50rpx 10rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.kkatwoitem{
				width: 20%;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.ktitem{
					width: 75rpx;
					height: 75rpx;
					background: #EEEEEE;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}
				
			}
			.kactive{
				.ktitem{
					background: #27a027;
					color: #fff;
				}
				
				
			}
			.cuo{
				.ktitem{
					background: #FA4E4E;
					color: #fff;
				}
			}

		}
		.jiexi{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 20rpx;
			.quanjie{
				height: 66rpx;
				background: #FD864F;
				border-radius: 5rpx;
				width: 48%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.twoitembtn{
				background: #FA4E4E;
			}
		}
		.jiaojuean{
			position: fixed;
			width: 100%;
			height: 85rpx;
			bottom: 0;
			background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
		}
		// padding-bottom: 150rpx;
	}
</style>
